<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
        <el-card class="box-card">
          <el-row>
            <el-form :model="searchForm" label-width="70px">
              <el-col :span="5">
                <el-form-item label="姓名">
                  <el-input v-model="searchForm.fullName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="入职日期" >
                  <el-date-picker
                    v-model="searchForm.startDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                  <el-date-picker
                    v-model="searchForm.endDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-form>
            <el-button type="info" plain @click="searchUser">搜索</el-button>
            <el-button type="primary" plain @click="dialogFormVisible=true">添加</el-button>
          </el-row>
          <el-table
            :data="userList"
            stripe
            style="width: 100%"
            >
            <el-table-column
              prop="id"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户名"
              >
            </el-table-column>
            <el-table-column
              prop="fullName"
              label="姓名"
              >
            </el-table-column>
            <el-table-column
              prop="tel"
              label="手机号">
            </el-table-column>
            <el-table-column
              label="性别">
              <template slot-scope="scope" >
                {{scope.row.sex|sexFit}}
              </template>
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱">
            </el-table-column>
            <el-table-column
              label="入职时间">
              <template slot-scope="scope" >
                {{scope.row.hiredate| datefmt('YYYY/MM/DD')}}
              </template>
            </el-table-column>
            <el-table-column
              label="职位状态">
              <template slot-scope="scope" >
                  <el-switch
                    @change="changeIsEnable(scope.row.id,scope.row.isEnable)"
                    v-model="scope.row.isEnable"
                    :active-value="0"
                    :inactive-value="1">
                  </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              >
              <template slot-scope="scope">
                <el-button v-if="scope.row.isEnable==1" type="primary" size="small"  icon="el-icon-edit" @click="getUserFrom(scope.row.id)"></el-button>
                <el-button v-if="scope.row.isEnable==1" type="primary" size="small" icon="el-icon-delete" @click="delUserFrom(scope.row.id)"></el-button>
                <el-button v-if="scope.row.isEnable==0" type="primary" size="small" icon="el-icon-edit" @click="assignRoles(scope.row)">分配角色</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pagenum"
            :page-sizes="[1, 3, 5, 20]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

          <el-dialog width="800px"  :close-on-click-modal="false" @close="clearUserFrom" :title="userForm.id==null?'添加用户':'修改用户'" :visible.sync="dialogFormVisible">
            <el-form :model="userForm" label-width="70px">
              <el-row :gutter="22">
                <el-col :span="11">
                  <el-form-item label="头像上传" >
                    <el-upload
                      class="avatar-uploader"
                      action="/api/user/upload"
                      :headers="auth"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="userForm.image!=null" :src="'/api/user/download/'+userForm.image" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="11">
                  <el-form-item label="用户名" >
                    <el-input v-model="userForm.userName" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="姓名" >
                    <el-input v-model="userForm.fullName" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="11">
                  <el-form-item label="手机号" >
                    <el-input v-model="userForm.tel" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="性别" >
                    <el-radio v-model="userForm.sex" :label="0">男</el-radio>
                    <el-radio v-model="userForm.sex" :label="1">女</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="11">
                  <el-form-item label="邮箱" >
                    <el-input v-model="userForm.email" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="入职日期" >
                    <el-date-picker
                      v-model="userForm.hiredate"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveUser()">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 分配角色 -->
          <el-dialog title="分配角色" :visible.sync="userRoleVisible" :close-on-click-modal="false" @closed="clearUserRole">
            <el-form >
              <el-col :span="24">
                <el-form-item label="用户" >
                  <el-input v-model="userfullName" disabled style="width: 40%" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="角色" >
                  <el-select v-model="roleIds" filterable  multiple placeholder="请选择">
                    <el-option
                      v-for="item in roleList"
                      :key="item.id"
                      :label="item.roleName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form>
            <div slot="footer">
              <el-button @click="userRoleVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveUserRole">完 成</el-button>
            </div>
          </el-dialog>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "UserList",
      data() {
          return{
            userList:[],
            dialogFormVisible:false,
            userForm:{},
            searchForm:{},
            page:{
              pagenum:0,
              pagesize:5
            },
            total:0,
            userRoleVisible:false,
            userId:null,
            userfullName:'',
            roleIds:[],
            roleList:[],
            imageUrl: '',
            auth:{}
          }
      },
      methods:{
        handleAvatarSuccess(res, file) {//上传完成之后完成回调
          this.userForm.image = res.result.path;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg' || file.type=='image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },



        saveUserRole: function () {
          var formdata = new FormData();
          formdata.append("userId", this.userId);
          formdata.append("roleIds", this.roleIds);
          this.$http.post("/userRole/save",formdata).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message)
            }
            this.userRoleVisible=false
            this.searchUser();
          });
        },
        clearUserRole: function () {
          this.userId==null
          this.userfullName=''
          this.roleIds=[]
        },
        assignRoles: async function (row) {
          this.userRoleVisible = true;
          this.userId=row.id
          this.userfullName=row.fullName

          let res = await this.$http.post("/role/list", {})
          this.roleList=res.data.result;
          this.$http.get("/userRole/getByUserId/"+row.id).then(
            (res) => {
              this.roleIds=res.data.result;
              console.log(res)
            }
          );


        },
        delUserFrom: function (id) {
          this.$http.get("/user/del/"+id).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message)
            }
            this.searchUser();
          });
        },
        changeIsEnable:function(id,isEnable){
          this.$http.get('/user/changeIsEnable/' + id + '/' + isEnable)
        },
        handleSizeChange: function (val) {
          this.page.pagesize=val
          this.searchUser();
        },
        handleCurrentChange: function (val) {
          this.page.pagenum=val
          this.searchUser();
        },
        getUserFrom: function (id) {
          this.$http.get("/user/get/"+id).then(
            (res) => {
              if (res.data.success) {
                this.userForm=res.data.result
                this.dialogFormVisible=true
              } else {
                this.$message.error(res.data.message)
              }
            }
          );
        },
        clearUserFrom: function () {
          this.userForm={}
        },
        searchUser: function () {
          this.$http.post("/user/list/"+this.page.pagenum+"/"+this.page.pagesize, this.searchForm).then(
            (res) => {
              this.userList=res.data.result.list;
              this.total=res.data.result.total;
              console.log(res)
            }
          );
        },
        saveUser:function () {
          this.$http.post("/user/save", this.userForm).then(
            (res) => {
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              } else {
                this.$message.error(res.data.message)
              }
              this.dialogFormVisible=false
              this.searchUser()
            }
          );
        }
      },
      filters:{
        sexFit:function (val) {
          return val==0?'男':'女'
        },
        isEnableFit:function (val) {
          return val==0?'在岗':'休假'
        }
      },
      mounted() {
        this.searchUser();
        this.auth.token = sessionStorage.getItem('token');

      }
    }
</script>

<style scoped >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
